<template>
  <div :id="editerId" class="jsoneditor-dom"></div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import 'jsoneditor/dist/jsoneditor.min.css'
  import JSONEditor from 'jsoneditor'
  import YBPopView from "@/utils/popView";

  @Component({
    components: {}
  })
  export default class JSONEditer extends Vue {

    @Prop({ type: String, default: 'jsoneditor' }) editerId!: string
    @Prop({ type: Number, default: 600 }) height!: number

    editor!: JSONEditor

    setData(data?: {} | string) {
      this.editor.set(data ? (typeof data === 'string' ? JSON.parse(data) : data) : {})
    }

    getData() {
      try {
        return this.editor.get()
      } catch (e) {
        this.$notify.error({
          title: 'JSON错误',
          message: e.message
        });
        return Promise.reject()
      }
    }
    mounted() {
      const container = document.getElementById(this.editerId)!
      const options: any = {
        modes: ['view', 'form', 'code', 'text', 'preview']
      }
      this.editor = new JSONEditor(container, options)
    }
  }

</script>

<style lang="scss">
.jsoneditor-dom {
  .jsoneditor {
    height: 600px;
  }
}
</style>
